<template>
	<div class="BaseDrawer">
		<a-drawer v-bind="attrs">
			<div class="drawerBody">
				<div class="drawerHeader">
					<slot name="drawerHeader" />
				</div>
				<div class="drawerContent">
					<slot name="drawerContent" />
				</div>
			</div>
			<template #footer>
				<div class="drawerFooter">
					<a-button type="primary" @click="okHandler" v-if="okShow">{{ okText }} </a-button>
					<a-button @click="cancelHandler" v-if="cancelShow">{{ cancelText }} </a-button>
				</div>
			</template>
		</a-drawer>
	</div>
</template>
<script setup name="BaseDrawer" lang='ts'>

  const attrs = useAttrs()
	const props = defineProps({
		show: {
			type: Boolean,
			default: () => false
		},
		okShow: {
			type: Boolean,
			default: () => true
		},
		okText: {
			type: String,
			default: () => '确定'
		},
		okHandler: {
			type: Function,
			default: () => {
				return () => {}
			}
		},
		cancelShow: {
			type: Boolean,
			default: () => true
		},
		cancelText: {
			type: String,
			default: () => '取消'
		},
		cancelHandler: {
			type: Function,
			default: () => {
				return () => {}
			}
		}
	})
</script>
<style scoped lang="less">
	.BaseDrawer {
	}
</style>
<style lang="less">
	.drawerBody {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		overflow: hidden;
		& > * {
			width: 100%;
		}
		.drawerHeader {
			flex: 0;
		}
		.drawerContent {
			flex: 0 1 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			& > * {
				width: 100%;
			}
		}
	}
	.drawerFooter {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 12px;
	}
</style>
